<!-- 教材库管理 -->
<template><div>
  <div style="margin:0">
  <el-form inline=true label-suffix="："><el-row align="middle" type="flex">
    <el-form-item label="教材编号">
      <el-input style="width: 100px;margin-left: -13px;" placeholder="" v-model="bh" size="mini"></el-input>
    </el-form-item>
    <el-form-item label="教材名称">
      <el-input style="width: 100px;margin-left: -13px;" placeholder="" v-model="bookname" size="mini"></el-input>
    </el-form-item>
    <el-form-item label="编者">
      <el-input style="width: 100px;margin-left: -13px;" placeholder="" v-model="name" size="mini"></el-input>
    </el-form-item>
    <el-form-item label="出版社">
      <el-input style="width: 100px;margin-left: -13px;" placeholder="" v-model="chubanshe" size="mini"></el-input>
    </el-form-item>
    <el-form-item label="出版日期">
          <el-date-picker
            v-model="chubanriqi" size="mini"
            type="date"
            style="width: 135px;margin-left: -13px;"
            value-format="yyyy-MM-dd"
            format="yyyy-MM-dd"
            placeholder="选择日期"
          >
          </el-date-picker>
    </el-form-item>
    <el-form-item label="引用课程">
      <el-input style="width: 100px;margin-left: -13px;" placeholder="" v-model="course" size="mini"></el-input>
    </el-form-item>
    <!-- <el-form-item id="btn_form_item"> -->
      <div class="search-button" @click="checkList" style="margin: 0 15px 10px 0">
      <img src="../../../assets/assessment/icon-search.png" alt="" />
      <span>查询</span>
    </div>
    <div
      class="cjrc-button"
      @click="addList"
      style="margin: 0 15px 10px 0"
    >
      <img src="@/assets/assessment/iconaddd.png" alt="" />
      <span style="margin-left: 10px;">添加新教材</span>
    </div>
        <!-- <el-button type="primary" icon="el-icon-search" @click="checkList" size="mini" style="margin:14px 5;font-weight: bold;font-size: 14px;">查询</el-button>
        <el-button type="success" icon="el-icon-search" @click="addList" size="mini" style="margin:14px 5;font-weight: bold;font-size: 14px;">添加新教材</el-button> -->
    <!-- </el-form-item> -->
  </el-row></el-form>
  </div>
  
  <div class="assessment-container">
    <div class="plan-entry-table-container">
      <el-table
        :data="tableData"
        style="width: 100%"
        class="xpaas-table-class"
        row-class-name="xpaas-row-class"
        cell-class-name="xpaas-cell-class"
        header-row-class-name="xpaas-header-row-class"
        header-cell-class-name="xpaas-header-cell-class"
      >
        <el-table-column
          prop="cz"
          label="操作"
          align="center"
          class-name=""
          label-class-name=""
        >
          <template slot-scope="{ row, $index }">
            <div style="display: flex; margin: 0 auto">
              <div class="bk-lucj-import-button" @click="editList(row.textbookInfo)">
                <img
                  src="../../../assets/assessment/icon-plan-record-detail.png"
                  alt=""
                />
                编辑
              </div>
              <div class="de-lucj-import-button" @click="deleteList(row.textbookInfo.id)">
                <img
                  src="../../../assets/assessment/icon-delete.png"
                  alt=""
                  style="width:13px;height:13px"
                />
                删除
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="textbookInfo.jcmc"
          label="教材名称"
          align="center"
          sortable
        >
        </el-table-column>
        <el-table-column prop="textbookInfo.bh" label="教材编号" align="center">
        </el-table-column>
        <el-table-column prop="textbookInfo.cbs" label="出版社" align="center">
        </el-table-column>
        <el-table-column
          prop="textbookInfo.cbrq"
          label="出版日期"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="textbookInfo.zz" label="编者" align="center">
        </el-table-column>
        <el-table-column label="引用课程" align="center">
          <template slot-scope="scope">
            <span style="cursor:pointer;" @click="useCourse(scope.row.textbookInfo.id)">{{
              scope.row.courses
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="textbookInfo.createtime"
          label="入库时间"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="textbookInfo.updatetime"
          label="修改时间"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="textbookInfo.bz" label="备注" align="center">
        </el-table-column>
      </el-table>
    </div>
    <div class="bottom-block" style="cursor: pointer;position:relative">
      <div class="export-button" style="margin-top:15px">
        <img src="../../../assets/assessment/icon-export.png" alt=""/>
        <download-excel
          class="export-btn"
          :data="tableData"
          :fields="jsonFields"
          type="xls"
          name="教材库信息.xls"
          style="color: #f3b815;cursor: pointer"
        >
          &ensp;导出Excel
        </download-excel>
      </div>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[10, 20, 30]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        style="position: absolute;
    right: 0;
    top: 15px;"
      >
      </el-pagination>
    </div>
    </div>
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      custom-class="manual-entry-container"
    >
       <div  style="width: 100%;margin: 60px 0 50px 0;border:1px solid #004ca7;border-radius: 6px;">
         <el-form :model="addForm" :rules="bookRules" ref="bookForm" label-width="130px" class="book-info-form" style="position: relative;">
<el-row>
             <el-col :span="12">
               <el-form-item label="教材编号" prop="bh">
                 <span class="mustW" style="position: absolute; left: -10%; color: red;">*</span>
                 <el-input v-model="addForm.bh" placeholder="请输入教材编号" class="formItemInput" />
               </el-form-item>
             </el-col>
             <el-col :span="12">
               <el-form-item label="教材名称" prop="jcmc">
                 <span class="mustW" style="position: absolute; left: -10%; color: red;">*</span>
                 <el-input v-model="addForm.jcmc" placeholder="请输入教材名称" class="formItemInput" />
               </el-form-item>
             </el-col>
</el-row><el-row>
             <el-col :span="12">
               <el-form-item label="出版社" prop="cbs">
                 <el-input v-model="addForm.cbs" placeholder="请输入出版社" class="formItemInput" />
               </el-form-item>
             </el-col>
             <el-col :span="12">
               <el-form-item label="出版日期" prop="cbrq">
                 <el-date-picker v-model="addForm.cbrq" type="date" value-format="yyyy-MM-dd" format="yyyy-MM-dd" placeholder="请选择出版日期" class="formItemDate" />
               </el-form-item>
             </el-col>
</el-row><el-row>
             <el-col :span="12" style="border-bottom: none;">
               <el-form-item label="编者" prop="zz">
                 <el-input v-model="addForm.zz" placeholder="请输入编者" class="formItemInput" />
               </el-form-item>
             </el-col>
             <el-col :span="12" style="border-bottom: none;">
               <el-form-item label="备注" prop="bz">
                 <el-input v-model="addForm.bz" placeholder="请输入备注" class="formItemInput" />
               </el-form-item>
             </el-col>
</el-row>
         </el-form>
      </div>
      <span
          slot="footer"
          class="dialog-footer"
          style="margin: 0 auto; display: block"
        >
          <button
            @click="addSaveBtn"
            style="
              width: 100px;
              height: 38px;
              border: 1px solid #f3b815;
              border-radius: 6px;
              color: #f3b815;
            "
          >
            保 存
          </button>
          <button
            @click="dialogVisible = false"
            style="
              margin-left: 60px;
              width: 100px;
              height: 38px;
              border: 1px solid #ff3819;
              border-radius: 6px;
              color: #ff3819;
            "
          >
            取 消
          </button>
      </span>
    </el-dialog>
    <el-dialog
      title="引用课程" width="75%"
      :visible.sync="showDialogVisible"
      custom-class="manual-entry-container2"
    >
  <div class="assessment-container">
    <div class="plan-entry-table-container" >
      <el-table
        :data="tableData3"
        border
        height="48vh"
        style="width:100%"
        class="table-data"
        row-class-name="row-class"
        cell-class-name="cell-class"
        header-row-class-name="header-row-class"
        header-cell-class-name="header-cell-class"
        cell-style="border:1px solid #C7D7EB;"
        header-cell-style="border:1px solid #C7D7EB;"
      >
        <el-table-column prop="xueqi" label="学期" align="center"></el-table-column>
        <el-table-column prop="courseCode" label="课程编号" align="center"></el-table-column>
        <el-table-column prop="courseName" label="课程名称" align="center"></el-table-column>
        <el-table-column prop="courseSimpleName" label="简称" align="center"></el-table-column>
        <el-table-column prop="credit" label="学分" align="center"></el-table-column>
        <el-table-column prop="totalHours" label="总学时" align="center"></el-table-column>
        <el-table-column prop="eduLevel" label="适用培养层次" align="center"></el-table-column>
        <el-table-column prop="mainSubject" label="是否主干课" align="center"></el-table-column>
        <el-table-column prop="remark" label="备注" align="center"></el-table-column>
      </el-table>
      </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="success" @click="showDialogVisible = false">确 定</el-button>
        <span style="display:inline-block;width:60px;"></span>
        <el-button type="danger" @click="showDialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
  </div>
</template>

<script>
import {
  reqGetInitList,
  xiugaisave,
  sc,
  tjxjc,
  yykc,
} from "@/api/textbookManagement/jckgl";
export default {
  data() {
    return {
      current: 1,
      size: 10,
      total: "",
      bh: "",
      bookname: "",
      name: "",
      chubanshe: "",
      chubanriqi: "",
      course: "",
      value1: "",
      dialogVisible: false,
      operateType: '',
      showDialogVisible: false,
      value: "",
      pycc: "",
      tableData: [{courses:'test',textbookInfo:{id: 'id123'}}],
      jsonFields: {
        教材名称: "textbookInfo.jcmc",
        教材编号: "textbookInfo.bh",
        出版社: "textbookInfo.cbs",
        出版日期: "textbookInfo.cbrq",
        编者: "textbookInfo.zz",
        引用课程: "courses",
        入库时间: "textbookInfo.createtime",
        修改时间: "textbookInfo.updatetime",
        备注: "textbookInfo.bz"
      },
      tableData3: [{courseCode:'12345'}],
      addForm: {
        id: '',
        bh: '',
        jcmc: '',
        cbs: '',
        cbrq: '',
        zz: '',
        bz: ''
      },
      bookRules: {
        bh: [{ required: true, message: '请输入教材编号', trigger: 'blur' }],
        jcmc: [{ required: true, message: '请输入教材名称', trigger: 'blur' }]
      },
      dialogTitle: ''
    };
  },
  created() {
    this.getInitList();
  },
  methods: {
    async getInitList() {
      const result = await reqGetInitList(
        this.current,
        this.size,
        this.bh,
        this.bookname,
        this.name,
        this.chubanshe,
        this.chubanriqi,
        this.course
      );
      if (result.data.code == 200) {
        this.tableData = result.data.data.records;
        this.total = result.data.data.total;
      }
    },
    // 查询按钮
    checkList() {
      this.getInitList();
    },
    // 编辑按钮
    async editList(row) {
      this.addForm.id = row.id
      this.addForm.jcmc = row.jcmc
      this.addForm.zz = row.zz
      this.addForm.cbs = row.cbs
      this.addForm.cbrq = row.cbrq
      this.addForm.bh = row.bh
      this.addForm.bz = row.bz
      this.operateType = 'edit'
      this.dialogTitle = '编辑教材'
      this.dialogVisible = true
    },
    // 删除的点击事件
    async deleteList(id) {
      this.$confirm('确认删除教材信息?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const result = await sc(id);
        if (result.data.code == 200) {
          this.getInitList();
          this.$message({
            type: 'success',
            message: '教材信息删除成功!'
          });
        } else {
          this.$message.error('教材信息删除失败！');
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    // 添加点击按钮
    addList() {
      this.addForm.id = ''
      this.addForm.bh = ''
      this.addForm.jcmc = ''
      this.addForm.cbs = ''
      this.addForm.cbrq = ''
      this.addForm.zz = ''
      this.addForm.bz = ''
      this.operateType = 'add'
      this.dialogTitle = '添加教材'
      this.dialogVisible = true;
      this.$refs.bookForm.clearValidate()
    },
    // 点击保存按钮
    addSaveBtn() {
      this.$refs['bookForm'].validate((valid) => {
        if (valid) {
          debugger
          this.addForm.cbrq = this.addForm.cbrq === null ? '' : this.addForm.cbrq
          if (this.operateType === 'add') {
            tjxjc(this.addForm).then(res => {
              if (res.data.code == 200) {
                this.dialogVisible = false;
                this.getInitList();
                this.$message({
                  message: '添加教材成功！',
                  type: 'success'
                });
              } else {
                this.$message.error('添加教材失败！')
              }
            })
          } else {
            xiugaisave(this.addForm).then(res => {
              if (res.data.code == 200) {
                this.dialogVisible = false;
                this.getInitList();
                this.$message({
                  message: '修改教材成功！',
                  type: 'success'
                });
              } else {
                this.$message.error('修改教材失败！')
              }
            })
          }
        }
      })
    },
    // 引用课程点击事件
    async useCourse(id) {
      this.showDialogVisible = true;
      const result = await yykc(id);
      if (result.data.code == 200) {
        this.tableData3 = result.data.data;
      }
    },
    handleCurrentChange(val) {
      this.current = val;
      this.getInitList();
    },
    handleSizeChange(val) {
      this.size = val;
      this.getInitList();
    }
  },
  mounted() {},
};
</script>
<style lang="less" scoped>
.de-lucj-import-button{
  cursor: pointer;
  width: 90px;
  border-radius: 6px;
  display: block;
  background: #ffffff;
  border: none;
  background: #ffefef;
  border: 1px solid #ff3819;
  box-sizing: border-box;
  color: #ff3819;
  margin-left: 10px;
  img {
      width: 14px;
      height: 14px;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }
}

  .bk-lucj-import-button {
    cursor: pointer;
    width: 90px;
    display: block;
    background: #ffffff;
    border-radius: 6px;
    border: none;
    background: #f1fff8;
    border: 1px solid #02c86c;
    box-sizing: border-box;
    color: #02c86c;
    img {
      width: 14px;
      height: 14px;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }
  }
.cjrc-button {
  width: 140px;
  height: 28px;
  line-height: 28px;
  background: #fff6ef;
  border: 1px solid #f86900;
  border-radius: 6px;
  color: #f86900;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  img {
    width: 14px;
    height: 14px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
}
.search-button {
  width: 77px;
  height: 28px;
  line-height: 28px;
  background: #f1f8fe;
  border: 1px solid #51aef6;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  > span {
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #51aef6;
  }
  > img {
    width: 20px;
    height: 20px;
    margin-right: 4px;
  }
}
/deep/.book-info-form > .el-row > .el-col > .el-form-item > .el-form-item__label{
  padding: 0 0 0 5%;
}
/deep/.el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:before {
  display: none;
}
.manual-entry-container {
  height: 40vh;
}
.manual-entry-container2 {
  height: 70vh;
  .el-table td,
  .el-table th.is-leaf,
  .el-table--border,
  .el-table--group {
    border-color: #c7d7eb;
  }
  .el-table__header tr,
  .el-table__header th {
    padding: 0;
    height: 76px;
    background-color: #edf2f9;
    font-size: 16px;
    font-family: “Microsoft YaHei”;
    font-weight: bold;
    line-height: 20px;
    color: #004ca7;
  }

  .el-table__body tr,
  .el-table__body td {
    padding: 0;
    height: 86px;
  }
}

.assessment-container {
  width: 100% !important;
  .block {
    margin-top: 15px;
    .el-pagination {
      // width: 500px;
      margin: 0 auto;
    }
  }
}

.plan-entry-table-container {
  margin-top: 15px;
  width: 100%;
  margin: 0 auto;
  .el-table td,
  .el-table th.is-leaf,
  .el-table--border,
  .el-table--group {
    border-color: #c7d7eb;
  }

  .el-table__header tr,
  .el-table__header th {
    padding: 0;
    height: 76px;
    background-color: #edf2f9;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    line-height: 20px;
    color: #004ca7;
  }

  .el-table__body tr,
  .el-table__body td {
    padding: 0;
    height: 86px;
  }

  .el-checkbox__inner:hover {
    border-color: #004ca7;
  }

  .el-checkbox__inner {
    border: 1px solid #004ca7;
    border-radius: 0;
  }

  .el-checkbox__input.is-checked .el-checkbox__inner,
  .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: #004ca7;
    border-color: #004ca7;
  }

  .el-checkbox__input.is-checked + .el-checkbox__label {
    color: #004ca7;
  }

  .el-checkbox.is-bordered.is-checked {
    border-color: #004ca7;
  }

  .el-checkbox__input.is-focus .el-checkbox__inner {
    border-color: #004ca7;
  }

  .export-button {
    background: #fff6ef;
    border: 1px solid #f3b815;
    width: auto;
    height: 28px;
    line-height: 28px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 3px 10px;
    box-sizing: border-box;

    > span {
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #f3b815;
    }

    > img {
      width: 16px;
      height: 16px;
      margin-right: 5px;
    }
  }

  .lucj-import-button {
    .export-button;
    width: 116px;
    margin: 0 auto 12px;
    background: #f1fff8;
    border: 1px solid #02c86c;

    &:last-child {
      margin-bottom: 0px;
    }

    > span {
      color: #02c86c;
    }
  }

  .lucj-expot-button {
    .export-button;
    background: #fff6ef;
    border: 1px solid #f3b815;
    width: 81px;
    margin: 0 auto 12px;

    &:last-child {
      margin-bottom: 0px;
    }

    > span {
      color: #f3b815;
    }
  }
}
.plsc-button {
  height: 28px;
  background: #ffefef;
  border: 1px solid #fa5339;
  border-radius: 6px;
  color: #ff3819;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  img {
    width: 17px;
    height: 17px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    margin-right: 5px;
  }
}
</style>

<style lang="less" scoped>
@import "../../../styles/print-entry.less";
/deep/.el-form-item__label{
  text-align: left;
}
.plan-entry-table-container {
  margin-top: 15px;

  .table-data {
    width: 100%;
    border: 0.8px solid #004ca7;
    border-radius: 9px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #004ca7;
  }
}

/deep/.el-date-editor .el-input__prefix {
  right: 10px;
  top: 2px;
}


 /deep/ .el-table th, .el-table tr {
    background-color: #edf2f9;

}
  /deep/ .el-form-item__label {
    font-size: 16px;
    // font-weight: 600;
    color: #004ca7;
  }
  /deep/ .el-form-item__error {
    margin: -15px 0 0 14%;
  }
  /deep/ .el-col-12 {
    border-bottom: 1px solid #93B2D7;
  }
  .formItemDate {
    width: 100%;
    ::v-deep .el-input__inner {
      width: 100%;
    }
  }
.book-info-form {
  marging: 0;
  padding: 0;
  > .el-row {
    marging: 0;
    padding: 0;
    > .el-col {
      marging: 0;
      padding: 0;
      > .el-form-item {
        margin-bottom: 0px;
        padding: 0;
        > ::v-deep .el-form-item__label {
          background-color: #BFD0E5;
          line-height: 60px;
        }
        > ::v-deep .el-form-item__content {
          height: 60px;
          line-height: 60px;
          padding: 0 40px;
        }
      }
    }
  }
}
@fontFamily:"Microsoft YaHei";
.xpaas-table-class {
  border: 1px solid #004ca7;
  border-radius: 9px;
  > ::v-deep div.el-table__header-wrapper {
    > table.el-table__header {
      > thead {
        > tr.xpaas-header-row-class {
          padding: 0;
          height: 76px;
          background-color: #edf2f9;
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          line-height: 20px;
          color: #004ca7;
          > th.xpaas-header-cell-class {
            font-weight: bold;
            border-right: 1px solid #c7d7eb;
            border-left: 0;
            border-bottom: 1px solid #c7d7eb;
            background-color: #edf2f9;
            > div.cell {
              font-size: 16px;
              font-weight: bold;
              font-family: @fontFamily;
              color: #004ca7;
            }
          }
        }
      }
    }
  }
  > ::v-deep div.el-table__body-wrapper {
    > table.el-table__body {
      > tbody {
        > tr.xpaas-row-class {
          > td.xpaas-header-cell-class {
            border-right: 1px solid #c7d7eb;
            border-left: 0;
            border-bottom: 1px solid #c7d7eb;
            background-color: #edf2f9;
            > div.cell {
              font-size: 16px;
              font-weight: bold;
              font-family: @fontFamily;
              color: #004ca7;
            }
          }
          > td.xpaas-cell-class {
            height: 76px;
            
            border-right: 1px solid #c7d7eb;
            border-left: 0;
            border-bottom: 1px solid #c7d7eb;
            > div.cell {
              font-weight: normal;
              font-family: @fontFamily;
              color: #004ca7;
            }
          }
        }
      }
    }
  }
}
</style>
